<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*复合选择器 (逻辑与) >id选择器>类选择器>标签选择器 范围越小优先级别越高 权值101*/

        div#main{
            color: rgba(160, 169, 179, 0.37);
            font-size: 152px;

        }
        /*id选择器>类选择器>标签选择器 权值100*/

        #main{

            color: #b31b22;
            font-size: 52px;

        }

        /*类选择器 权值10==类选择器权值*/

        /* 相同即级别:1.叠加原则 2.就近原则*/
        .test2{
            color: #534d80;
        }

        .test1{
            color:purple;
        }
        /*css选择器
        1.相同的选择器:1.叠加原则 2.就近原则
        2.类选择器>标签选择器
        */

        /* 标签选择器 权值1*/
        div{
            color: orange;
        }
        div{
            color: greenyellow;
        }
        div{
            color: #b31b22;
            font-size: 22px;
        }
        /* *代表body内所有标签 因为范围大所有权值小0 !important权值1000 瞬间提升到最高优先级*/
        *{

            color: #7464f5 !important;
            font-size: 30px;
        }

    </style>
</head>
<body>
        /* 同一个标签里面可以多个类名*/
    <div id="main" class="test1 test2" style="color: orangered">111111111</div>
</body>
</html>